<template>
  <div class="search-device">
    <div class="search-device__header">{{ station.flName }}</div>
    <div>
      <van-search v-model="value" placeholder="请输入设备名称" @input="handleSearch" shape="round" @clear="clearSearch" @onLoad="onLoad" />
    </div>
    <van-list v-model="loading" :finished="finished" finished-text="" class="search-device__result">
      <van-cell v-for="item in results" :key="item.baseInfoData.id" :title="item.baseInfoData.fullPath" @click="() => handleClick(item)" />
    </van-list>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { log } from '@/utils';

@Component({
  name: 'SearchDevice',
  components: {
  }
})
export default class SearchDevice extends Vue {
  private get station() {
    return this.$store.state.station;
  }

  private results: Record<string, any>[] = []

  private loading = false;
  private finished = true;
  private value = ''
  private controller = new AbortController();

  clearSearch() {
    this.finished = true;
    this.loading = false;
    this.value = '';
    this.results = [];
  }

  handleSearch() {
    this.controller.abort();
    if (this.value === '') {
      this.finished = true;
      this.loading = false;
      this.value = '';
      this.results = [];
      return;
    }
    const bureauCode = window.map.Config?.User?.bureauCode ?? '0301';
    const queryCondition = {
      bureauCode,
      objectId: this.station.id,
      deviceName: this.value,
      // 资产状态，1：运行
      assetState: '1',
    }

    this.loading = true;
    this.results = [];
  }

  onLoad() {
    console.log('onLoad')
  }

  handleClick(item: Record<string, any>) {
    log(item.baseInfoData)
    this.$store.dispatch('setEquipment', item.baseInfoData);
    this.$router.go(-2);
  }
}
</script>

<style lang="scss" scoped>
.search-device {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;

  &__header {
    font-size: 20px;
    font-weight: bold;
    padding: 8px;
    background-color: #ffffff;
  }

  &__item {
    font-size: 14px;
  }
}
</style>
